<template>
  <div class="template-set" v-loading="loading">
     <div>
        <span>更改门户模板：</span>
        <el-radio-group v-model="tempRadio" size="large" @change="changeModel">
            <el-radio  v-for="item in typeList" :label="item.id" :key="item.id">{{item.showName}}</el-radio>
        </el-radio-group>
        <el-button class="template-btn" type="primary" @click="handleSave">保存</el-button>
     </div>
     <div class="template-wrap" >
        <TemplateContent :data="checkModelList" :is-disabled="isDisabled" @update:data="refreshConfig" @remove="handleDel"></TemplateContent>
        <TemplateRight :data="modelList" @move="moveConfig"></TemplateRight>
     </div>

  </div>
</template>

<script setup>
import TemplateContent from '../part/template-set/content.vue'
import TemplateRight from '../part/template-set/template-right.vue'
import {ref, onMounted, computed, defineProps, watch, defineEmits} from 'vue'
import { modelJsonArr } from '../part/template-set/xicheng-config.js'
// import { modelArr } from '../part/template-set/template-config.js'
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { useMessage } from '@/hooks/useMessage.js';
import { deepCopy } from '@/lib/tools.js';


const {messageSuccess, messageError} = useMessage();


const store = useStore();
const route = useRoute();

const emit = defineEmits(['updateInstitution', 'update-brandId']);

const loading = ref(false);


// 初始化请求的模版数据
const checkModelList = ref([]);

// 初始化请求的模版数据
const modelList = ref([]);

// 初始化请求的模版数据
const modelListMap = ref({});

// 是否禁用
const isDisabled = computed(() => {
     return tempRadio.value === '2';
});

const props = defineProps({
    currentTab: {
        type: String,
        default: ''
    },
    institutionInfo: {
        type: Object,
        default: () => {}
    }
});

watch(() => props.currentTab, (newVal) => {
    if (newVal === 'template') {
        getConfigData();
    }
})

// 模板类型
const typeList = ref([]);


// 当前模板模式
const tempRadio = ref(1);
// 模板ID
const tempId = ref('');


function getConfigData() {
    loading.value = true;
    store.dispatch('proxyAction', {
        name: 'getTemplateConfig',
        queries: {
            institutionId: route.query.id,
            componentType: 'portalColumn'
        }
    }).then((res) => {
        loading.value = false;
        tempId.value = res.data && res.data.id || '';
        tempRadio.value = res.data && res.data.fromTemplateId || '1';
        checkModelList.value = res.data && res.data.data && JSON.parse(res.data.data) || [];
        updateRightModel();
    }).catch(err => {
        loading.value = false;
        console.log(err);
    })
}

function updateRightModel() {
    modelList.value = modelListMap.value[tempRadio.value] && deepCopy(modelListMap.value[tempRadio.value]);
    let selectMap = {};
    checkModelList.value && checkModelList.value.forEach(item => {
         selectMap[item.modelKey] = item;
    })
    modelList.value.forEach(item => {
        if(selectMap[item.modelKey]) {
            item.hidden = true;
        }
    })
}

// 右边模板拖拽到中间
function moveConfig(data, index) {
    if(index === -1) {
        checkModelList.value.push(data);
    }else{
        checkModelList.value.splice(index, 0, data);
    }
}

// 内容区域拖拽
function refreshConfig(data) {
    checkModelList.value = data;
}

// 切换模板模式
function changeModel() {
    checkModelList.value = modelListMap.value[tempRadio.value];
    updateRightModel();
}

// 保存
function handleSave() {
    loading.value = true;
    store.dispatch('proxyAction', {
        name: 'saveSiteConfig',
        data: {
            client: 'pc',
            institutionId: route.query.id, // 当前组织机构id, 中台操作传空
            componentType: 'portalColumn',
            fromTemplateId: tempRadio.value, // 配置名称
            data: checkModelList.value.length ? JSON.stringify(checkModelList.value) : '', // 配置数据
            id: tempId.value || ''
        }
    }).then((res) => {
        loading.value = false;
        tempId.value = res.data || '';
        messageSuccess('保存成功');
    }).catch(({status: {code, desc}}) => {
        loading.value = false;
    })
}

// 内容区域删除
function handleDel(data) {
    modelList.value.forEach(item => {
        if(item.modelKey === data.modelKey) {
            item.hidden = false;
        }
    })
}

//  获取所有模板数据
function getTemplateList() {
    store.dispatch('proxyAction', {
        name: 'templateList'
    }).then((res) => {
        typeList.value = res.data || [];
        typeList.value.length && typeList.value.forEach(item => {
            let dataList = item.dataList || [];
            modelListMap.value[item.id] = [];
            dataList.length && dataList.forEach(dataItem => {
                if(dataItem.componentType === 'portalColumn') {
                    modelListMap.value[item.id] = dataItem.data && JSON.parse(dataItem.data) || [];
                }
            })
        })
    }).catch(({status: {code, desc}}) => {
    })
}


onMounted(() => {
    getTemplateList();
})


</script>

<style lang="scss" scoped>
.template-set {
  .template-wrap {
      display: flex;
  }
  .template-btn {
    margin-left: 20px;
  }
}

</style>